import {View, Picker, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import classNames from 'classnames';
import {store} from "../../store/store";
import './topModal.scss';
import Close from '../../asset/images/close.png';
import Search from "../../asset/images/search_icon.png";
import {unite} from "../../utils";

class TopModal extends Taro.Component {
    static options = {
        addGlobalClass: true
    };
    config = {
        component: true,
        componentGenerics: {
            TopModal: true
        }
    };

    state = {
        selectData: ['课程', '地点', '时间'], //选择
        selectIx: 0,
        selectList: -1,
        regionId: -1, //区域id
        description: null, //默认全部地区存储
        classTypeId: '-1', //类型id
        timer: '',
        tgType: '请选择时间范围',
        tgTypeId: '-1',
        regionStatus: -1,
        selectWrap: [], //选项列表集合
        timeDataName: [], //时间区间选择名称
        moneyId: -1, //价格区间id
        sexFlagIs: null, //性别 0 女 1 男
        sexFlagWrap: ['女', '男'],

        quanIx0: 0,
        quanIx1: 0,
        quanIx2: 0,
    };

    componentWillMount() {
        const {getTimer, getRegionId, onRegionStatus, getClassTypeId,
            getPriceId, getClassScaleId, getSexFlagIs,getPeriodId
        } = this.props;
        let name = [];
        var time = '全部'; //时间
        store.getState().getData.periods.forEach((item) => {
            name.push(item.periodName)
            if (item.periodID == getPeriodId) {
                time = item.periodName
            }
        });
        var description = store.getState().getData.regions[0].parentRegionId; //默认全部地区存储
        console.log(getRegionId + 'console.log(getRegionId);');
        console.log(description)
        this.setState({
            selectWrap: store.getState().getData,
            description, //默认全部地区存储
            timeDataName: name,
            tgType: time || name[0], //默认全部时间
            timer: getTimer,
            regionId: getRegionId,
            regionStatus: onRegionStatus,
            classTypeId: getClassTypeId,
            moneyId: getPriceId,
            selectList: getClassScaleId,
            sexFlagIs: getSexFlagIs,
        }, () => {
            var num0 = 0;
            if (getClassTypeId != -1) {
                // num0 += 1;
            }
            if (getPriceId != -1) {
                num0 += 1;
            }

            var num1 = 0;
            if (getRegionId && (getRegionId != -1) && getRegionId != description) {
                num1 += 1;
            }
            if (getClassScaleId != -1) {
                num1 += 1;
            }

            var num2 = 0;
            if (this.state.tgType != '全部') {
                num2 += 1;
            }

            this.setState({
                quanIx0: num0,
                quanIx1: num1,
                quanIx2: num2,
            })
        })
    }

    componentWillReceiveProps = (nextProps) => {
        const {getTimer} = this.props;
        if ((nextProps.getTimer && getTimer !== nextProps.getTimer)) {
            console.log(nextProps.getClassScaleId + 'nextProps.getClassScaleId');
            this.setState({
                timer: nextProps.getTimer,
                regionId: nextProps.getRegionId,
                regionStatus: nextProps.onRegionStatus,
                selectList: nextProps.getClassScaleId,
                sexFlagIs: nextProps.getSexFlagIs,
            })
        }
    };

    //索引值切换
    skipItem = (index) => {
        const {selectList} = this.state;
        var num = 0;
        if (selectList != index) {
            if (index == -1) {
                num = -1
            } else {
                if (selectList == -1) {
                    num = +1;
                }
            }
        }
        this.setState(prevState => ({
            selectList: index,
            quanIx1: Number(prevState.quanIx1) + num,
        }))
    };

    //性别选择
    skipItemSex = (index) => {
        this.setState({
            sexFlagIs: index,
        })
    };

    onChangeType = (res) => {
        console.log(res);
        let nameType = store.getState().getData.periods[res].periodName;
        let nameTypeId = store.getState().getData.periods[res].periodID;
        // let nameType = store.getState().getData.periods[res.detail.value[0]].periodName;
        // let nameTypeId = store.getState().getData.periods[res.detail.value[0]].periodID;
        this.setState({
            tgType: nameType,
            tgTypeId: nameTypeId,
            quanIx2: res == 0 ? 0 : 1,
        });
    };

    //选择区域id
    selectId = (id, statusId, name, type=true) => {
        // console.log(id, statusId, name, type,'id, statusId, name, type')
        const {classTypeId, regionId, description} = this.state;
        const {getRegionId} = this.props;
        if (name == 'regionId') {
            console.log(id);
            console.log(regionId);
            var num = 0;
            if (regionId != id) {
                if ((id == -1 && regionId != description)) {
                    num = -1
                } else {
                    if ((regionId == description && id != -1)) {
                        num = +1;
                    }
                }
            }
            this.setState(prevState => ({
                [name]: id == -1 ? statusId : id,
                quanIx1: Number(prevState.quanIx1) + num,
                regionStatus: id
            }))
        } else if (statusId == 'classTypeId') {
            console.log(classTypeId,id);
            // console.log(classTypeId.indexOf(id));
            // this.setState(prevState => {
            //     prevState.classTypeId.indexOf(id) == -1 ? prevState.classTypeId.push(id) : prevState.classTypeId.splice(classTypeId.indexOf(id), 1);
            //     return {
            //         classTypeId: prevState.classTypeId
            //     }
            // });
            var num = 0;
            if (classTypeId != id && type) {
                if (id == -1) {
                    num = -1
                } else {
                    if (classTypeId == -1) {
                        num = +1;
                    }
                }
            }
            this.setState(prevState => {
                return {
                    classTypeId: id,
                    quanIx0: Number(prevState.quanIx0) + num,
                }
            });
        }
    };

    //选择价格区间id
    moneyTypeId = (id) => {
        const {moneyId} = this.state;
        var num = 0;
        if (moneyId != id) {
            if (id == -1) {
                num = -1
            } else {
                if (moneyId == -1) {
                    num = +1;
                }
            }
        }
        this.setState(prevState => ({
            moneyId: id,
            quanIx0: Number(prevState.quanIx0) + num,
        }))
    };

    close = () => {
        this.props.onClose();
    }

    //重置
    chongzhi = () => {
        const {selectWrap} = this.state;
        Taro.showLoading({
            title: '请稍后…'
        });
        this.setState({
          selectList: -1,
          regionId: selectWrap.regions[0].parentRegionId, //区域id
          classTypeId: -1, //类型id
          timer: '',
          tgType: '请选择时间范围',
          tgTypeId: '-1',
          moneyId: -1, //价格区间id
          regionStatus: -1,
          sexFlagIs: null,
            quanIx0: 0,
            quanIx1: 0,
            quanIx2: 0,
      }, () => {
            setTimeout(function () {
                Taro.hideLoading();
            }, 600);
        })
    };

    //查询
    skipCx = () => {
        const {selectList, tgTypeId, regionId, classTypeId, moneyId, regionStatus, sexFlagIs, quanIx0, quanIx1, quanIx2} = this.state;
        this.props.onExport({
            selectList: selectList,  //1v1
            tgTypeId: tgTypeId, //时间段
            regionId: regionId, //地区
            regionStatus,
            classTypeId: classTypeId, //课程类型
            moneyId: moneyId, //价格id
            sexFlagIs: sexFlagIs, //性别 0女 1男
            quanIxStatus: (quanIx0 == 0 && quanIx1 == 0 && quanIx2 == 0) ? false : true,
        })
    };

    //选择
    skipSelect = (index) => {
        this.setState({
            selectIx: index
        })
    };

    render() {
        const {selectWrap, selectList, timer,
            timeDataName, tgType, regionId,
            classTypeId, moneyId, regionStatus,
            sexFlagWrap, sexFlagIs,selectData,
            selectIx, quanIx0, quanIx1, quanIx2
        } = this.state;
        const {getType} = this.props;
        return (
            <View className="model-type" onClick={this.close}>
                <View className="model-type-wrap" onClick={(e) => {e.stopPropagation();}}>
                    <View className="model-type-top flex-lr">
                        {selectData.map((item, index) => (
                            <View className={`type-item ${selectIx == index ? 'type-item-active' : ''}`} key={index} onClick={this.skipSelect.bind(this, index)}>
                                <View>{item}</View>
                                <View className="heng"></View>
                                {(quanIx0 && index == 0) && (
                                    <View className="quan flex-center">{quanIx0}</View>
                                )}
                                {(quanIx1 && index == 1) && (
                                    <View className="quan flex-center">{quanIx1}</View>
                                )}
                                {(quanIx2 && index == 2) && (
                                    <View className="quan flex-center">{quanIx2}</View>
                                )}
                            </View>
                        ))}
                    </View>
                    <View className="model-type-content">
                        {selectIx == 0 && (
                            <View>
                                <View className="model-top-list1">
                                    <View className="top-list1-name">课程类型</View>
                                    <View className="top-rihgt-list">
                                        {selectWrap && selectWrap.classTypes.map((item, index) => (
                                            <View className={`item-btn ${classTypeId == item.classTypeID ? 'item-btn-active' : ''}`} key={index} onClick={this.selectId.bind(this, item.classTypeID, 'classTypeId', '',false)}>{item.classTypeName}</View>
                                        ))}
                                    </View>
                                </View>
                                <View className="model-top-list1">
                                    <View className="top-list1-name">价格</View>
                                    <View className="top-rihgt-list">
                                        {selectWrap && selectWrap.prices.map((item, index) => (
                                            <View className={`item-btn ${moneyId == item.priceID ? 'item-btn-active' : ''}`} key={index} onClick={this.moneyTypeId.bind(this, item.priceID)}>{item.priceName}</View>
                                        ))}
                                    </View>
                                </View>
                            </View>
                        )}
                        {selectIx == 1 && (
                            <View>
                                <View className="model-top-list1">
                                    <View className="top-list1-name">区域</View>
                                    <View className="top-rihgt-list">
                                        {selectWrap && selectWrap.regions.map((item, index) => (
                                            <View className={`item-btn ${regionId == item.regionId ? 'item-btn-active' : ''} ${regionStatus == item.regionId ? 'item-btn-active' : ''}`} key={index} onClick={this.selectId.bind(this, item.regionId, item.parentRegionId, 'regionId')}>{item.description}</View>
                                        ))}
                                    </View>
                                </View>
                                <View className="model-top-list1">
                                    <View className="top-list1-name">人数</View>
                                    <View className="top-rihgt-list">
                                        {selectWrap && selectWrap.classScales.map((item, index) => (
                                            <View className={`item-btn ${selectList == item.scaleId ? 'item-btn-active' : ''}`} key={index} onClick={this.skipItem.bind(this, item.scaleId)}>{item.scaleName}</View>
                                        ))}
                                    </View>
                                </View>
                            </View>
                        )}
                        {selectIx == 2 && (
                            <View className="model-top-list1">
                                <View className="list-time-wrap">
                                    {timeDataName && timeDataName.map((item, index) => (
                                        <View className={`list-time flex-center ${tgType == item ? 'list-time-active' : ''}`} onClick={this.onChangeType.bind(this, index)} key={index}>{item}</View>
                                    ))}
                                </View>
                                {/*<View className="top-list1-name">时间</View>*/}
                                {/*<View className="top-rihgt flex-lr">*/}
                                {/*    <Picker className="date" mode='multiSelector' range={[timeDataName]} onChange={this.onChangeType}>*/}
                                {/*        <View className={classNames('picker',{pickerColor: tgType != '请选择时间范围'})}>*/}
                                {/*            {tgType}*/}
                                {/*        </View>*/}
                                {/*    </Picker>*/}
                                {/*    {getType == 1 && (*/}
                                {/*        <View className="flex-r">*/}
                                {/*            {sexFlagWrap && sexFlagWrap.map((item, index) => (*/}
                                {/*                <View className={`item-btn ${sexFlagIs == index ? 'item-btn-active' : ''}`} key={index} onClick={this.skipItemSex.bind(this, index)}>{item}</View>*/}
                                {/*            ))}*/}
                                {/*        </View>*/}
                                {/*    )}*/}
                                {/*    /!*<View className="timer">{timer}</View>*!/*/}
                                {/*</View>*/}
                            </View>
                        )}
                    </View>
                    <View className="model-btn">
                        <View className="btn" onClick={this.chongzhi}>重置</View>
                        <View className="btn btn-red" onClick={this.skipCx}>确认</View>
                    </View>
                </View>
            </View>
        )
    }
}

export default TopModal;

